import { Dropdown } from "antd";
import lessModule from "./index.module.less";
import downArrowImage from "../../../../../../../../../../assets/image/homePage-menuDownArrow.png"
import rightArrowImage from "../../../../../../../../../../assets/image/homePage-menuRightArrow.png"
import handleImage from "../../../../../../../../../../assets/image/accountManagementPage-handle.png"
import { useState } from "react";
import { $eventBus, $FilterOrganizationRank, $PowerSetting, $oganizationRankList, $SplitOganizationNameAndID } from "../../../../../../../../../../common/utils";

// 主页-账号管理页面-侧边菜单组件-菜单子项组件
interface componentInterface {
    id: string
    level: number
    name: string
    isStatusIcon?: boolean
    organization: Array<string>
    openKeysList: Array<string>
    selectKeysList: Array<string>
}

const HomePage_SystemSettingsPage_AccountManagementPage_SideMenuComponnet_MenuItemComponent: React.FC<componentInterface> = (props) => {
    let [items, setItems] = useState<any>([]);
    const change_openDropdown = () => {
        items = []
        const operationList = ["新建", "编辑", "删除"]
        operationList.forEach((item) => {
            const rank = $oganizationRankList[props.level]
            const data = { rank, operation: item }
            if (item !== "新建") {
                data["id"] = props.id
                data["name"] = props.name


                if (item === "编辑" && props.level) {
                    data["organization"] = props.organization
                }
            }


            !(item === "删除" && !$PowerSetting(props.id)[`${$FilterOrganizationRank($oganizationRankList[props.level])}Delete`]) && items.push({
                label: (
                    <div className={lessModule["homePageSystemSettingsPageAccountManagementPageSideMenuComponnetMenuItemComponent-dropdownMenuItem"]}
                        onClick={(e) => click_DropdownItem(e, data)}
                    >{item}{rank}</div>
                )
            })
        })
        setItems([...items])
    }

    const click_DropdownItem = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: object) => {
        event.stopPropagation()
        setTimeout(() => {
            $eventBus.emit("openOrganizatioOperationModal", { source: "HomePage_SystemSettingsPage_AccountManagementPage_SideMenuComponnet_MenuItemComponent", explain: "请按需打开组织操作弹窗", data: { ...data, openKeysList: props.openKeysList, selectKeysList: props.selectKeysList } })
        });
    }
    return (
        <div className={lessModule["homePageSystemSettingsPageAccountManagementPageSideMenuComponnetMenuItemComponent"]}>
            <>
                {
                    props.isStatusIcon && <img src={props.openKeysList.includes(`${props.level}-${props.id}`) ? downArrowImage : rightArrowImage} />
                }
                <div>{props.name}</div>
            </>
            <Dropdown menu={{ items }} placement="bottomCenter" onOpenChange={(open) => open && change_openDropdown()}>
                {
                    $PowerSetting()["superPower"] ? <img className={lessModule["homePageSystemSettingsPageAccountManagementPageSideMenuComponnetMenuItemComponent-handleImage"]} src={handleImage} onClick={(e) => e.stopPropagation()} /> : <></>
                }
            </Dropdown>
        </div>
    )
}
export default HomePage_SystemSettingsPage_AccountManagementPage_SideMenuComponnet_MenuItemComponent